import React, { useState, useEffect } from "react";
import { Search } from "react-vant"; //搜索
import { NavBar } from "react-vant"; //导航栏
import { useNavigate } from "react-router-dom";
import "./scss/Search.scss";
import axios from "./untils/Axios";
import { FloatButton } from "antd";
import { Toast } from 'react-vant';
import { FireO } from '@react-vant/icons'
import { useLocation } from "react-router-dom";
import { ShoppingCartO   } from '@react-vant/icons';
export default function Searchs() {
  let loaction = useLocation();
  let nav = useNavigate();
  const backgroundStyle = {
    background: "linear-gradient(to bottom, #B9C9E5, #FFFFFF)",
  };
  const hotsearchs = ["Vue", "Python", "React", "布局"]; //热搜
  const [value, setValue] = useState(""); //搜索
  const [searhistory, setSearchistory] = useState([1, 2, 32, "顺风耳"]); //搜索历史
  const [bookData, setBookData] = useState(false); //渲染数据
  let [olddata, setOldData] = useState([]); //旧数据
  const error = [1, 2, 3, 4, 5, 6];
  //获取数据
  let getdata = async () => {
    let res = await axios.get("/jjt/hisdatajjt",{params:{name:value}});
    console.log(res.data.copy);
    setSearchistory (res.data.copy);
    setBookData(res.data.ress);
    setOldData(res.data.ress);
    
  };
  let mapsea = ()=>{
    if(loaction.state.name!==""){
      setValue(loaction.state.name)
      getdata();
    }
    
  }
  // 搜索
  let tosearch = async() => {
    console.log(value);
    
    let copy = olddata.filter(item=>item.name.includes(value));
    console.log(copy,555555555555)
    if (copy.length==0) {
        // Toast.fail('暂无数据');
        Toast({
            message: '暂无数据',
            icon: <FireO />,
          })
    }else{
        if(value){
            await axios.post("/jjt/hisaddjjt",{name:value});
            getdata()
        }else{
            getdata()
        }
        
    }
    // getdata()
  };
    //加入购物车
    let tocar = async(item) => {
      console.log(item,555555555)
      let {data} =  await axios.post("/jjt/caradd", item);
      console.log(data,6666)
      if(data.code===200){
        Toast({
          message: '加入购物车成功',
          // icon: <FireO />,
        })
      }else{
        Toast({
          message: '加入购物车失败',
        })
      }
    }
  useEffect(() => {
    getdata();
    mapsea()
  }, []);
  return (
    <div className="search">
      <div className="searchtop">
        <NavBar
          title="搜索"
          leftText="返回"
          //   rightText="按钮"
          onClickLeft={() => nav("/jjthome")}
          onClickRight={() => console.log("按钮")}
        />
      </div>
      <div className="searchbot" style={backgroundStyle}>
        <div className="classfy2">
          <Search
            showAction
            background="rgba(255, 255, 255, 0)"
            actionText={
              <div
                onClick={() => {
                  tosearch();
                }}
              >
                搜索
              </div>
            }
            value={value}
            onChange={setValue}
            placeholder="请输入搜索关键词"
          />
        </div>
        <>
        </>
        <div className="searchhistory">
          <p>搜索历史</p>
          <div className="hotjjt">
            {searhistory.map((item,index) => (
              <div key={index} onClick={()=>{
                setValue(item.name);
                getdata();
              }}>{item.name}</div>
            ))}
          </div>
        </div>
        <div className="searchhot">
          <p>热门搜索</p>
          <div className="hotjjt">
            {hotsearchs.map((item, index) => (
              <div
                key={index}
                onClick={() => {
                  //   hotsearch(item);
                  setValue(item);
                  getdata();
                }}
              >
                {item}
              </div>
            ))}
          </div>
        </div>
      </div>
      {bookData.length > 0 ? (
        <div className="searchbox3">
          <p className="p">精选课程</p>
          {bookData.slice(0,9).map((item) => (
            <div className="searchdiv3" key={item._id} >
              <div className="sealeft" onClick={()=>{nav(`/detail?id=${item._id}`)}}>
                <img src={item.image} alt="" />
              </div>
              <div className="searight">
                <div style={{ width: "100%", textAlign: "left" }}>
                  {item.name}
                </div>
                <div
                  style={{
                    width: "100%",
                    // textAlign: "left",
                    display: "flex",

                    justifyContent: "space-between",
                  }}
                >
                  <p style={{ color: "red" }}>￥{item.price}</p>
                  <p className="carjjt"><ShoppingCartO onClick={()=>{tocar(item)}}  /></p>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="searchbox32">
          <p className="p2">精选课程</p>
          {error.map((item, index) => (
            <div className="searchdiv32" key={index}>
              <div className="sealeft2">
                <button />
              </div>
              <div className="searight2">
                <div
                  style={{
                    width: "100%",
                    height: "20px",
                    background: "#e3e3e5",
                  }}
                ></div>
                <div
                  style={{
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                  }}
                >
                  <p
                    style={{
                      width: "30%",
                      height: "20px",
                      background: "#e3e3e5",
                    }}
                  ></p>
                  <p
                    style={{
                      width: "30%",
                      height: "20px",
                      background: "#e3e3e5",
                    }}
                  ></p>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      <FloatButton.BackTop />
    </div>
  );
}
